<script setup lang="ts">
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const showStatistics = computed(() => userInfo.value?.show_statistics === 1);
const showPlayedgames = computed(() => userInfo.value?.show_played_games === 1);

const settings = computed(() => [
  { key: 'show_statistics', value: showStatistics.value, label: $t('mg5aIZrtpvRAfPv3jCwp') },
  { key: 'show_played_games', value: showPlayedgames.value, label: $t('j9YRrckvbPDjokWnmiKsK') },
]);

function updateValue(e: any) {
  const key = e.target.value;

  const _value = e.target.checked ? 1 : 0;
  const target = settings.value.find(item => item.key === key);

  if (target) {
    target.value = e.target.checked;
    triggerRef(settings); // 通知视图更新
  }

  apis.apiUserUpdateSetting({ requestBody: { [key]: _value } })
    .then(() => {
      queryClient.invalidateQueries({
        queryKey: [apis.apiUserInfo.id],
        exact: false,
      });
    }).catch((e) => {
      antdMessage.error(e);
    });
}
</script>

<template>
  <div class="settings h-full flex flex-col items-start text-sm">
    <span class="base-title">{{ $t('rmax0gz7IkeFj88oqMGcr') }}</span>
    <div class="my-2 min-h-10 text-sys-text-body">
      {{ $t('pyRn3zLMGbcyBqRpHeRy') }}
    </div>

    <div class="flex flex-col gap-2">
      <ACheckbox
        v-for="i in settings" :key="i.label" v-model:checked="i.value" :value="i.key"
        @change="updateValue"
      >
        {{ i.label }}
      </ACheckbox>
    </div>
  </div>
</template>

<style lang="scss">
.ant-checkbox-group.ant-cover__checkboxgroup {
  --uno: 'flex flex-col';
  label {
    --uno: 'mb-3';
    span {
      --uno: 'text-base text-sys-text-body';
    }
  }
}
</style>
